<template>
  <div>
    <el-card class="booking-container">
      <el-container class="switch-arrow">
        <div>
          <el-button @click="jumpTypeSelect(true) "><i class="el-icon-arrow-left"></i></el-button>
          <el-button @click="jumpTypeSelect(false)"><i class="el-icon-arrow-right"></i></el-button>
        </div>
        <h3 class="booking_title">心理咨询</h3>
      </el-container>
      <div v-show="selectCardShow">
        <el-form :model="bookingForm" :rules="rules" label-position="left"
                 label-width="80px">
          <el-form-item label="预约教师">
            <el-input :placeholder="this.teacherName" disabled></el-input>
          </el-form-item>
          <el-form-item label="预约时间" prop="date">
            <el-col :span="11">
              <el-date-picker
                v-model="bookingForm.yyrq"
                :picker-options="pickerOptions1"
                class="size-full"
                placeholder="选择时间"
                type="date"
                value-format="yyyy-MM-dd">
              </el-date-picker>
            </el-col>
            <el-col :span="2" class="el-form--inline">-</el-col>
            <el-col :span="11">
              <el-select v-model="bookingForm.availTime.id" class="size-full" placeholder="选择时间" clearable>
                <el-option
                  v-for="item in operation1"
                  :key="item.id"
                  :label="item.start"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-col>
          </el-form-item>
          <el-form-item label="咨询主题">
            <el-input v-model="bookingForm.zxzt" placeholder="请填写咨询主题" type="text"></el-input>
          </el-form-item>
          <el-form-item label="问题简述" prop="bz">
            <el-input v-model="bookingForm.bz"
                      :autosize="{ minRows: 4, maxRows: 5}"
                      placeholder="请输入咨询内容(不超过200个字)"
                      type="textarea"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button style="width: 40%;background: #9495c5;border: none" type="primary" v-on:click="booking">提交
            </el-button>
            <el-button style="width: 40%;background: #9495c5;border: none" type="primary" v-on:click="clearData">重置
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <div v-show="!selectCardShow">
        <el-form label-position="left" label-width="80px" style="margin-top: 20px;">
          <el-form-item label="主题类型">
            <el-checkbox-group v-model="select" :max="checkBoxMaxNum">
              <el-checkbox v-for="operate in operation" :key="operate.id" :label="operate.id" v-if="operate.id<=12">
                {{ operate.name }}
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>

          <el-form :inline="true">
            <el-form-item label="其他类型">
              <el-input v-model="bookingForm.other" placeholder="若无可不填" style="width: 60%" type="text"></el-input>
              <el-button @click="otherTypeSubmit">确定</el-button>
            </el-form-item>
          </el-form>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'BookingCard',
  props: ['teacherName'],
  data () {
    return {
      props: {multiple: true, checkStrictly: true},
      pickerOptions1: {
        disabledDate (time) {
          let a = time.getTime() > Date.now() + 3600 * 1000 * 24 * 30 // 限制过去的30天内
          let b = time.getTime() <= Date.now() // 限制不能越过今天
          return a || b
        },
        shortcuts: [{
          text: '今天',
          onClick (picker) {
            picker.$emit('pick', new Date())
          }
        }, {
          text: '明天',
          onClick (picker) {
            const date = new Date()
            date.setTime(date.getTime() + 3600 * 1000 * 24)
            picker.$emit('pick', date)
          }
        }, {
          text: '下周',
          onClick (picker) {
            const date = new Date()
            date.setTime(date.getTime() + 3600 * 1000 * 24 * 7)
            picker.$emit('pick', date)
          }
        }]
      },
      select: [],
      bookingForm: {
        id: '',
        acc: '',
        jsxm: '',
        topic: {
          id: '',
          name: ''
        },
        zxzt: '',
        bz: '',
        yyrq: '',
        availTime: {
          id: '',
          start: '',
          end: ''
        },
        other: ' ',
        createtime: '',
        state: ''
      },
      rules: {},
      selectCardShow: true,
      checkBoxMaxNum: 1,
      operation: [],
      operation1: []
    }
  },
  mounted () {
    this.$axios.get('/student/booking/topic_list').then(resp => {
      this.operation = resp.data
    }).catch(failResponse => {
      alert('服务器响应请求失败！')
    })
    this.$axios.get('/student/booking/available_time_list').then(resp => {
      this.operation1 = resp.data
    }).catch(failResponse => {
      alert('服务器响应请求失败！')
    })
  },
  methods: {
    booking () {
      if (this.select !== []) {
        this.bookingForm.topic.id = this.select[0]
        this.bookingForm.topic.name = this.operation[this.select[0] - 1].name
      } else {
        this.bookingForm.topic.id = 13
        this.bookingForm.topic.name = this.operation[13].name
      }
      this.bookingForm.availTime.start = this.operation1[this.bookingForm.availTime.id - 1].start
      this.bookingForm.availTime.end = this.operation1[this.bookingForm.availTime.id - 1].end
      this.bookingForm.acc = this.$store.state.acc
      this.bookingForm.jsxm = this.teacherName
      this.bookingForm.state = 100
      let isEmpty = true // 是否为空
      for (let key in this.bookingForm) {
        if (this.bookingForm[key] === '') {
          isEmpty = false
        }
      }
      if (!isEmpty) {
        if (this.bookingForm.other !== ' ') {
          this.bookingForm.topic.id = 13
          this.bookingForm.topic.name = this.operation[13].name
        }
        this.$axios.get('/student/process/' + this.$store.state.acc + '/show/finish').then(resp => {
          if (resp.data === '') {
            this.$axios.post('/student/booking', {
              id: this.bookingForm.id,
              acc: this.bookingForm.acc,
              jsxm: this.teacherName,
              topic: this.bookingForm.topic,
              zxzt: this.bookingForm.zxzt,
              bz: this.bookingForm.bz,
              yyrq: this.bookingForm.yyrq,
              availTime: this.bookingForm.availTime,
              other: this.bookingForm.other,
              state: this.bookingForm.state
            }).then(resp => {
              this.$alert('预约成功！', '提示', {
                confirmButtonText: '确定'
              })
            }).catch(failResponse => {
              alert('服务器响应请求失败！')
            })
          } else {
            this.$axios.get('/student/process/' + this.$store.state.acc + '/show/finish').then(resp => {
            }).catch(failResponse => {
              alert('服务器响应请求失败！')
            })
          }
        }).catch(failResponse => {
          alert('服务器响应请求失败！')
        })
      } else {
        this.$alert('请填写完整信息', '提示', {
          confirmButtonText: '确定'
        })
      }
    },
    clearData () {
      Object.assign(this.$data, this.$options.data.call(this))
    },
    jumpTypeSelect (visible) {
      this.selectCardShow = visible
    },
    otherTypeSubmit () {
      this.select = []
      this.bookingForm.topic.id = 13
    }
  }
}
</script>

<style scoped>
.booking-container {
  border-radius: 15px;
  background-clip: padding-box;
  margin: 120px auto 100px;
  width: 400px;
  padding: 0px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}

.booking_title {
  margin: 20px auto 20px auto;
  text-align: center;
  color: #9495c5;
}

.switch-arrow {

}

.size-full {
  width: 100%;
}
</style>
